<template>
	<view class="bill-type">	
		<u-navbar
			title="缴费类型管理"
			:border-bottom="false"  
		>
			<view class="navbar__right" slot="right">
				<view class="navbar__right__icon">
					<u-icon name="more-dot-fill" @click="actionShow=true"></u-icon>
				</view>
				<u-action-sheet :list="actionList"
					v-model="actionShow"
					@click="actionClick"
				></u-action-sheet>
			</view>
		</u-navbar>
		<u-sticky>
			<view class="bill-type__top">

				<view class="bill-type__top__range" @click="parkSelect=true">
					<view class="bill-type__top__range__text">
						<view >园区</view>
						<u-icon name="arrow-down-fill" ></u-icon>
					</view>
					<view class="bill-type__top__range__time">
						{{parkName}}
					</view>
					<u-select 	v-model="parkSelect"
								:list="parkList" 
								@confirm="parkConfirm"
								value-name="id"
								label-name="parkName"></u-select>
				</view>
				<view class="bill-type__top__add" @click="addType">
					<u-icon name="plus"></u-icon>
					<view>新增缴费类型</view>
				</view>
			</view>
		</u-sticky>
		<view v-if="queryStatus=='bill-type__loadding'">
			<u-loading  mode="circle" ></u-loading>
		</view>
		<view v-else>
			<view v-if="billTypeList.length==0" class="bill-type__noresult">
				<u-empty text="未查询到账单类型" mode="list"></u-empty>
			</view>
			
			<view v-else class="bill-type__box" >

				<view  :class="{'bill-type__box__list':true,
								'bill-type__box__list--last':index==(billTypeList.length-1)} 
					" v-for="(type,index) in billTypeList">
						<view class="bill-type__box__list__left">
							<view class="bill-type__box__list__left__type">类型：{{type.name}}</view>
							<view class="bill-type__box__list__left__number">编号：{{type.id}}</view>
						</view>
						
						<u-modal v-model="deleteModel[index].value"
							:show-title="false"
							:content="deleteConfirmContent(index)"
							:show-cancel-button="true"
							confirm-color="#177fff"
							@confirm="deleteBillType(index)">
						</u-modal>
						
						<view class="bill-type__box__list__right">
							<view class="bill-type__box__list__right__delete" @click="deleteModel[index].value=true">
							<u-icon name="trash"></u-icon>
							<view>删除</view>
							</view>
						</view>
						

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import testData from './testData.js'
	export default {
		data() {
			return {
				parkId:"",
				parkName:"",
				parkList:[],
				billTypeList:[],
				actionList:[],
				actionShow:false,
				parkSelect:false,
				deleteModel:[],
				queryStatus:"",
			}
		},
		mounted(){
			// console.log("userInfo",this.$store.state.userInfo)
			if(this.$store.state.userInfo.parkId!=""){
				this.parkId=this.$store.state.userInfo.parkId
				this.getPark()
				this.getBillTypeList()
				// console.log("parkId",this.parkId)
			 }
			 // else{
			// 	this.parkId=this.$store.state.currentPark.id
			// }
			// console.log("parkId",this.parkId)

			this.getParkList()
			this.cancelModel
		},
		methods: {
			actionClick(index){
				
			},
			getPark(){
				let parkData={
					"park_id":this.parkId
				}
				// let parkData={
				// 	"park_id":2
				// }
				this.$Axios({
					method:"get",
					url:this.$store.state.baseURL+"/park/get",
					params:parkData
				}).then((response)=>{
					thia.parkName=response.data.msg
				});
			},
			getParkList(){
				this.$Axios({
					method:"get",
					url:this.$store.state.baseURL+"/park/all",
				}).then((response)=>{
					let responseData=response.data
					this.parkList=response.data.msg;
				});
			},
			async getBillTypeList(){
				this.queryStatus="loadding"
				console.log("getBillType",this.parkId)
				let queryData={
					parkId:this.parkId
				}
				await this.$Axios({
					method:"get",
					url:this.$store.state.baseURL+"/bill/bill-type/get",
					params:queryData
				}).then((response)=>{
					if(response.data.state=="success"){
						this.billTypeList=response.data.msg.billTypes;
					}else{
						uni.showToast({
							title: response.data.msg,
							icon:'none',
							duration: 2000
						});
						this.billTypeList=[]
					}
				})
				// this.billTypeList=testData.billTypeList
				for(let i in this.billTypeList){
					this.deleteModel.push({
						value:false
						})
				}
				this.queryStatus="finish"
			},
			deleteBillType(index){
				uni.showLoading()
				let deleteData={
					parkId:this.parkId,
					typeId:this.billTypeList[index].id,
				}
				this.$Axios({
					method:"get",
					url:this.$store.state.baseURL+"/bill/bill-type/delete",
					params:deleteData
				}).then((response)=>{
					uni.hideLoading()
					if(response.data.state=="success"){
						uni.showToast({
							title: "删除成功",
							icon:'none',
							duration: 2000
						});
						this.getBillTypeList()
					}else{
						uni.showToast({
							title: response.data.msg,
							icon:'none',
							duration: 2000
						});
					}
				})
				
			},
			addType(){
				uni.navigateTo({
					url:"/pages/core/service/bill/addType"
				})
			},
			parkConfirm(park){
				console.log(park);
				this.parkId=park[0].value;
				this.parkName=park[0].label;
				console.log("change后",this.parkId)
				this.getBillTypeList()
			},
			deleteConfirmContent(index){
				return "确认删除缴费"+'\"'+this.billTypeList[index].name+'\"'+"吗"
			},

		}
	}
</script>

<style lang="less">
.navbar{
	&__right{
		display: flex;
		flex-direction: row;
		margin-right: @uni-spacing-col-base;
		margin-left: auto;

		&__icon{
			font-size: @uni-font-size-x-lg;
			margin-left: @uni-spacing-col-base;
			margin-right: @uni-spacing-col-base;
		}
	}
}
.bill-type{
	background-color: @uni-bg-color-grey;
	height: calc(100vh);
	&__top{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		padding:@uni-spacing-row-sm @uni-spacing-col-base;
		background-color: #fff;
		&__range{
			display: flex;
			flex-direction: row;
			align-items: center;
			
			&__text{
				display: flex;
				flex-direction: row;
				color: @font-color-grey;
				// font-size: @uni-font-size-sm;
				margin: @uni-spacing-col-sm;
			}
		}
		&__add{
			display: flex;
			flex-direction: row;
			color: @font-color-blue;
		}
	}
	&__loadding{
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	&__noresult{
		margin-top: @uni-spacing-row-lg;
	}
	&__box{
		display: flex;
		flex-direction: column;
		margin:@uni-spacing-row-base @uni-spacing-col-base;
		padding-bottom: @uni-spacing-row-lg;
		border-radius: @border-small;
		background-color: #fff;

		&__list{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-top: @uni-spacing-row-lg;
				padding-bottom: @uni-spacing-row-lg;
				margin-left: @uni-spacing-col-lg;
				
				margin-right: @uni-spacing-col-lg;
				border-bottom:@line-light-size solid @uni-border-color;
				&__left{
					display: flex;
					flex-direction: column;
					&__type{	
						font-size: @uni-font-size-lg;
					}
					&__number{
						margin-top: @uni-spacing-row-x-sm;
						// font-size: @uni-font-size-sm;
						color: @uni-text-color-grey;
					}
				}
				&__right{
					display: flex;
					flex-direction: row;
					align-items: center;
					&__total{
						font-size: @uni-font-size-x-lg;
					}
					&__delete{
						display: flex;
						flex-direction: row;
						align-items: center;
						padding: @uni-spacing-row-base @uni-spacing-col-lg;
						border-radius: 15rpx;
						background-color: @color-lightblue;
						color: #007AFF;
						// font-size: @uni-font-size-sm;
					}
				}
			&__top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: @uni-spacing-row-base;
				&__number{
					font-weight: bold;
				}
			}
			&__mid{	
			}
		}
		&__list--last{
			border-bottom: 0;
		}
	}
}	

</style>
